<template>
	<div class="mobile_home">
		<div class="banner">
			 <el-carousel :interval="5000" arrow="nerver" height="10rem">
		        <el-carousel-item v-for="item in HotBanner" :key="item.id">
		          <img :src="`http://127.0.0.1/api/public/showimg/${item.picture}`" />
		        </el-carousel-item>
		      </el-carousel>
		</div>
		<!-- 传递的数据如果是固定的字符串,那么不需要v-bind指令 -->
		<MobileHomeList proptitle="热门推荐" :proplist="HotBanner"></MobileHomeList>
		<MobileHomeList proptitle="新书上市" :proplist="newlist" style="margin-bottom: 5.5rem;"></MobileHomeList>
	</div>
</template>

<script>
	import MobileHomeList from '../../components/mobile/home/MobileHomeList.vue'
	export default {
		name:'MobileHome',
		components:{
			MobileHomeList
		},
		data(){
			return{
				newlist:[],
				bannerlist:[]
			}
		},
		computed:{
			HotBanner(){
				this.bannerlist.sort((a1,a2)=>{
					return a2.hot-a1.hot
				})
				// forEach/for...in/for...of:都是可以再需要限制输出的数据数量模块使用
				//map 基本确定不会更改数组的长度，只不过数据的内容发生格式化改变
				let arr = [];
				this.bannerlist.map((item,i)=>{
					if(i<4){
						arr.push(item);
					}
				})
				return arr;
			}
		},
		mounted() {
			this.$get('/api/public/findHot/1/5').then((resp)=>{
				this.bannerlist = resp.data.data;
				console.log(this.bannerlist)
			})
			this.$get('/api/public/findPageBook/1/6/0').then((resp)=>{
				this.newlist = resp.data.data.books;
				console.log(this.newlist)
			})
		}
	}
</script>

<style>
	.mobile_home{
		background-color: #F5D5A0;;
		position: relative;
		top: 56px;
	}
    .banner{
			  width: 100%;
			  height: 10rem;
			  margin-bottom: 1rem;
	 }
    .banner img{
			  width: 100%;
			  height: 100%;
	 }
	 /* 穿刺 css用于修改固定组件样式的操作 */
    .banner  .el-carousel /deep/ .el-carousel__button{
			  height: 5px !important;
	 }
   .banner  .el-carousel /deep/ .is-active .el-carousel__button{
			  background-color: #a68b5b !important;
	 }
</style>
